@import "./assets/styles/variables.scss";

.side-nav-window {
  position: -webkit-sticky;
  position: sticky;
  top: 96px;
  bottom: 0;
  width: 370px;
  min-width: 370px;
  max-height: calc(100vh - 96px);
  min-height: calc(100vh - 96px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 20px 5px;
  margin: 0;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background: #f8f8f8;
  border-right: 1px solid $dark-white;
}

.api-nav-window {
  position: sticky;
  top: 96px;
  bottom: 0;
  width: 370px;
  min-width: 370px;
  max-height: calc(100vh - 96px);
  min-height: calc(100vh - 96px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  padding: 0 0 5px 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background: $off-white;
  border-right: 1px solid $dark-white;
}

.api-nav-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: auto;
  min-height: calc(100vh - 122px);
}

.api-nav-inner-wrapper {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  // overflow-x: hidden;
  position: relative;
}

.api-nav-select-wrapper ul {
  margin-left: 0;
}

.api-nav-select-wrapper {
  margin: 0;
  font-size: 1.1em;
  color: $orange;
  line-height: 30px;
  width: 100%;
  overflow-x: hidden;
}

.side-nav-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: auto;
  min-height: calc(100vh - 122px);
}

.side-nav-inner-wrapper {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
}

.side-nav-title {
  font-size: 1.5rem;
  color: $black;
  margin: 0;
}

.lang-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 20px 0 0 0;
  width: 100%;
}

.lang-text {
  margin: 0 33px 0 0;
  font-size: 1.1em;
}

.family-span {
  font-size: 1rem;
  color: #333;
  font-weight: 400;
}

.family-version-select {
  width: 70px;
  padding: 0px 5px 0px 5px;
  border: none;
  height: 30px;
  font-size: 1em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(/img/down.png) 96% / 15% no-repeat $off-white;
  cursor: pointer;
}

select {
  width: 100px;
  padding: 0px 5px 0px 5px;
  border: 1px solid $dark-white;
  height: 30px;
  font-size: 0.9em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(/img/down.png) 96% / 15% no-repeat $white;
  cursor: pointer;
}

select:focus {
  outline: none;
}

.api-side-nav-select-wrapper {
  font-size: 1.1em;
  color: $orange;
  line-height: 30px;
  width: 100%;
  padding: 0 20px;
}

.side-nav-select-wrapper {
  margin: 20px 0 0 0;
  font-size: 1.1em;
  color: #ed7d31;
  line-height: 30px;
  width: 100%;
  overflow-x: hidden;
}

.family-nav-no-margin {
  margin: 0;
}

.side-nav-select-list {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.family-nav-select-list {
  margin-left: 30px;
}

.side-nav-select-link {
  cursor: pointer;
  margin: 0 auto 0 0;
  list-style-type: none;
}

.side-nav-select-link:hover {
  color: $orange;
  text-decoration: underline;
}

.side-nav-active {
  font-weight: 900;
}

.ads-wrapper {
  width: 319px;
  height: 142px;
}

@media screen and (max-width: 900px) {
  .side-nav-window,
  .api-nav-window,
  .tutorial-nav-window {
    flex-direction: row;
    align-items: center;
    position: relative;
    top: 0;
    padding: 10px 20px;
    min-height: auto;
    max-height: auto;
    border-right: none;
    border-bottom: 1px solid $dark-white;
    width: 100%;
  }

  .side-nav-inner-wrapper {
    margin: 0;
  }

  #carbonads {
    max-width: none;
  }

  .ads-wrapper {
    margin: 0;
  }

  .side-nav-wrapper {
    min-height: auto;
  }

  .side-nav-select-list {
    display: inline-block;
  }

  .side-nav-select-link {
    display: inline-block;
  }

  .side-nav-select-wrapper,
  .api-nav-select-wrapper {
    display: none;
  }
}

@media print {
  .side-nav-window {
    display: none;
  }
}

@media (prefers-color-scheme: dark) {

  .side-nav-window,
  .api-nav-window {
    background: $blacker !important;
    border-color: $blackest !important;
  }
  .side-nav-title {
    color: $white;
  }
  .family-span {
    color: $white;
  }
  .family-version-select, select {
    background: url(/img/down.png) 96% / 15% no-repeat $blackest;
    color: $ash;
    border-color: black;
  }
  .api-nav-window {
    background: $blacker;
  }

  .family-version-select,
  .family-search-box,
  .api-search-box {
    background-color: $blackest !important;
    border-color: $blackest !important;
    color: $light-gray !important;
  }

  .family-top-wrapper,
  .family-search-button,
  .family-search-img,
  .api-search-img {
    background-color: $blackest  !important;;
    border-color: $blackest !important;
    color: $light-gray;
  }

}
